<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>数据日志</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
</head>
<body>
<div th:replace="common/bar::topbar" style="height: 100%"></div>
<div class="container-fluid">
    <div class="row">
        <!--左边导航栏-->
        <div th:replace="common/bar::#sidebar"></div>
        <!--//中间表格栏-->
        <div style="float: left;margin:15px">

            <div id="main" style="width: 600px;height:400px;"></div>


            <h6 style="margin: 15px;color: darkgray" id="DevDesc"></h6>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col" style="margin-left: 50px;margin-right: 50px ">时间</th>
                    <th scope="col">数值</th>
                    <th scope="col">单位</th>
                </tr>
                </thead>
                <tbody id="t_body">

                </tbody>
            </table>
            <hr/>

            <div class="page">
                <button id="firstPage">首页</button>&#160;&#160;&#160;
                <button id="previous">上一页</button>&#160;&#160;&#160;
                第<input type="text" id="index" value="1" size="1">页&#160;&#160;&#160;
                <button id="next">下一页</button>&#160;&#160;&#160;
                <button id="last">尾页</button>
                <button id="PageFind">查询</button>
                <div id="pageCount" style="display: inline-block"></div>
            </div>
        </div>
    </div>
    <!--右边-->
    <div style="float: right">
        <div style="height: 100px;width: 100px"></div>
    </div>

</div>
</div>
</body>
</html>


<script type="text/javascript">
    var pageSize = "5";//每页行数
    var pageIndex = "1";//当前页
    var totalPageCount = "0";//总页数
    var totalCount = "0";//总记录数
    var OriUrl = window.location.pathname
    //jquery代码随着document加载完毕而加载
    $(document).ready(function () {
        //分页查询
        window.onload = queryForPages();

        function queryForPages() {
            $.ajax({
                url: '/data/api' + OriUrl,
                type: 'get',
                dataType: 'json',
                data: "pageNo=" + pageIndex + "&pageSize=" + pageSize,
                success: function callbackFun(data) {
                    //清空数据
                    clearDate();
                    //查询数据
                    fillTable(data);
                }
            });
        }

        //填充数据
        function fillTable(data) {
            var list = ""
            var trs = "";//不初始化字符串"",会默认"undefined"
            list = data.data.dataTypeDtoList
            totalPageCount = list.pages,
                // pageSize=list.size,
                pageIndex = list.pageNum,
            totalCount = 0+pageSize*(pageIndex-1);
            for (var i = 0; i < list.size; i++) {
                totalCount++;
                var jtime=new Date(list.list[i]['acceptTime']).toLocaleDateString().replace(/\//g, "-") + " " + new Date(list.list[i]['acceptTime']).toTimeString().substr(0, 8);
                var tr = '<tr><th scope="row">'+totalCount+'</th>' +
                    '<td>' + jtime + '</td>' +
                    '<td>' + list.list[i]['value'] + '</td>' +
                    '<td>' + list.list[i]['typeUnit'] + '</td></tr>';
                trs += tr;
            }
            $("#t_body").append(trs);

        }

        //清空数据
        function clearDate() {
            $("#t_body").html("");
        }

        //首页
        $("#firstPage").click(function () {
            //var index=$("#index").val();
            pageIndex = "1";
            $("#index").val(pageIndex);
            queryForPages();
        });
        //上一页
        $("#previous").click(function () {
            if (pageIndex > 1) {
                pageIndex--;
            }
            $("#index").val(pageIndex);
            queryForPages();
        });  //下一页
        $("#next").click(function () {
            if (pageIndex < totalPageCount) {
                pageIndex++;
            }
            $("#index").val(pageIndex);
            queryForPages();
        });
        //尾页
        $("#last").click(function () {
            pageIndex = totalPageCount;
            $("#index").val(pageIndex);
            queryForPages();
        });
        $("#PageFind").click(function () {
            pageIndex = $("#index").val();
            $("#index").val(pageIndex);
            queryForPages();
        });
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    $.ajax({
        url: '/data/api' + OriUrl,
        type: 'get',
        dataType: 'json',
        data: "pageNo=" + 1 + "&pageSize=" + 300,
        success: function callbackFun(data) {

            var list = data.data.dataTypeDtoList;
            var xAxisData=new Array();
            var seriesData=new Array();

            for (var i = 0; i < list.size; i++) {
                var jtime=new Date(list.list[i]['acceptTime']).toLocaleDateString().replace(/\//g, "-") + " " + new Date(list.list[i]['acceptTime']).toTimeString().substr(0, 8);
                xAxisData.push(jtime);
                 seriesData.push(list.list[i]['value']);
            }

            xAxisData.push(jtime);

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: seriesData,
                    type: 'line',
                    smooth: true
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    });

</script>